<template>
	<div class="section-head" style="margin-bottom: 5px;">
		<h1 style="margin-right: 30px;margin-left: 0;">xxxx管理后台</h1>
		<el-button type="danger" :loading="fetching" :icon="Refresh" @click="getStatistics" />
	</div>

	<!-- 用户数据概览 -->
	<el-row class="panel-group">
		<el-col :xs="12" :sm="8" :lg="6" class="card-panel-col">
			<div class="card-panel">
				<div class="card-panel-icon">
					<div class="card-panel-icon-wapper icon-success">
						<font-awesome-icon :size="cardIconSize" :icon="['fas', 'users-line']" />
					</div>
				</div>
				<div class="card-panel-info">
					<div class="card-panel-text">在线人数</div>
					<count-to :start-val="0" :end-val="statistics?.online_num || 0" :duration="countToDuration"
						class="card-panel-num" />
				</div>
			</div>
		</el-col>
		<el-col :xs="12" :sm="8" :lg="6" class="card-panel-col">
			<div class="card-panel">
				<div class="card-panel-icon">
					<div class="card-panel-icon-wapper icon-primary">
						<font-awesome-icon :size="cardIconSize" :icon="['fas', 'users']" />
					</div>
				</div>
				<div class="card-panel-info">
					<div class="card-panel-text">
						日活
					</div>
					<count-to :start-val="0" :end-val="statistics?.online_num || 0" :duration="countToDuration"
						class="card-panel-num" />
				</div>
			</div>
		</el-col>
		<el-col :xs="12" :sm="8" :lg="6" class="card-panel-col">
			<div class="card-panel">
				<div class="card-panel-icon">
					<div class="card-panel-icon-wapper icon-primary">
						<font-awesome-icon :size="cardIconSize" :icon="['fas', 'address-book']" />
					</div>
				</div>
				<div class="card-panel-info">
					<div class="card-panel-text">总用户数</div>
					<count-to :start-val="0" :end-val="statistics?.online_num || 0" :duration="countToDuration"
						class="card-panel-num" />
				</div>
			</div>
		</el-col>
		<el-col :xs="12" :sm="8" :lg="6" class="card-panel-col">
			<div class="card-panel">
				<div class="card-panel-icon">
					<div class="card-panel-icon-wapper icon-danger">
						<font-awesome-icon :size="cardIconSize" :icon="['fas', 'arrow-trend-up']" />
					</div>
				</div>
				<div class="card-panel-info">
					<div class="card-panel-text">今日新增用户</div>
					<count-to :start-val="0" :end-val="statistics?.online_num || 0" :duration="countToDuration"
						class="card-panel-num" />
				</div>
			</div>
		</el-col>
	</el-row>

</template>

<script setup>
import { ref, inject } from 'vue';
import { CountTo } from 'vue3-count-to';
import { Refresh } from '@element-plus/icons-vue'

const http = inject('$http');

let statistics = ref({}),
	fetching = ref(false);
const getStatistics = async () => {
	fetching.value = true
	const response = await http.get('/dashboard');
	fetching.value = false
	if (response.code === 200) {
		statistics.value = response.data
	}
}

getStatistics();

const countToDuration = 800
const cardIconSize = '3x'

</script>

<style lang="scss" scoped>
.el-main {
	background-color: #f2f6fc !important;
}

.panel-group {
	margin-top: 12px;

	.card-panel-col {
		margin-bottom: 12px;
	}

	.card-panel {

		width: calc(100% - 20px);
		margin: 5px 10px;
		height: 108px;
		cursor: pointer;
		font-size: 12px;
		position: relative;
		overflow: hidden;
		color: #666;
		background: #fff;
		box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
		border-color: rgba(0, 0, 0, .05);

		display: flex;
		align-items: center;

		.icon-success {
			color: #1fd13d;
		}

		.icon-primary {
			color: #1e81fb;
		}

		.icon-warning {
			color: #b0b523;
		}

		.icon-danger {
			color: #f4516c;
		}

		&-icon {
			margin: 14px 0 0 14px;
			padding: 16px;
			transition: all 0.38s ease-out;
			border-radius: 6px;

			$wapperSize: 60px;

			&-wapper {
				width: $wapperSize;
				height: $wapperSize;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 8px;
			}

		}

		&-info {
			font-weight: bold;
			margin-left: 0px;

			.card-panel-text {
				line-height: 18px;
				color: rgba(0, 0, 0, 0.45);
				font-size: 16px;
				margin-bottom: 12px;
			}

			.card-panel-num {
				font-size: 20px;
			}

			label {
				margin: 0 5px;
			}
		}

		&:hover {
			.card-panel-icon-wapper {
				color: #fff;
			}

			.icon-success {
				background: #1fd13d;
			}

			.icon-primary {
				background: #1e81fb;
			}

			.icon-warning {
				background: #b0b523;
			}

			.icon-danger {
				background: #f4516c;
			}
		}
	}
}

@media (max-width:550px) {
	.card-panel-info {
		display: none;
	}

	.card-panel-icon {
		float: none !important;
		width: 100%;
		height: 100%;
		margin: 0 !important;

		.svg-icon {
			display: block;
			margin: 14px auto !important;
			float: none !important;
		}
	}
}
</style>